<template>
	<view class="trolley-box" :class="{hideAnimation}" v-show="isShow">
		<view class="trolley-shadow" @click="toggle()">

		</view>
		<view class="trolley-content" :style="{maxHeight:'calc(100vh - '+2*scrollViewHeight+'px)'}">
			<view class="top">
				<text class="top-title">已选商品</text>
				<view class="emptied" @click="clearTrolley">
					<image class="emptied-pic" src="@/static/images/icon/delete.png" mode="aspectFit"></image>
					<text class="emptied-text">清空购物车</text>
				</view>
			</view>
			<view class="hs-line-x" style="margin: 0 auto;width: calc(100% - 64rpx);"></view>
			<scroll-view scroll-y="true"
				:style="{ maxHeight: `calc(100vh - ${2*scrollViewHeight}px - 102rpx - ${scollUnder}rpx)` }">
				<view class="item" v-for="item of trolleyList.validList" :key="item.id">

					<!-- <radio :value="item.selected" style="transform:scale(0.7)" @change="selectedTrolley(item.id)"
							:checked="item.selected == true" /> -->
					<radio class="select" :value="item.id+'-'+item.selected" style="transform:scale(0.7)"
						:checked="item.selected" @click="selectedTrolley(item.id,item.selected)" />

					<image class="item-picture" :src="item.imageUrl" mode=""></image>
					<view class="item-text">
						<text class="text">{{item.name}}</text>
						<text class="text">￥{{item.displayPrice}}</text>
					</view>
					<view class="count">
						<image src="@/static/images/icon/sub.png" mode="aspectFit" class="sub"
							@click="adjCount(item,-1)"></image>
						<text>{{item.quantity}}</text>
						<image src="@/static/images/icon/add.png" mode="aspectFit" class="add"
							@click="adjCount(item,1)"></image>
					</view>
				</view>
			</scroll-view>
			<view :style="'height: '+(scollUnder+10)+'rpx;'"></view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getTrolleyList,
		addTrolley,
		clearTrolley,
		selectedTrolley,
		deleteTrolley
	} from '@/api/product.js'
	export default {
		name: "trolley",
		props: {
			scollUnder: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				tempAdjCounts: {},
				isShow: false,
				hideAnimation: true, // 隐藏动画
				options1: [{
					text: '取消',
					style: {
						backgroundColor: '#007aff'
					}
				}, {
					text: '确认',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				scrollViewHeight: uni.getMenuButtonBoundingClientRect().height +
					8 +
					uni.getWindowInfo().statusBarHeight,
			};
		},
		computed: {
			...mapGetters(['trolleyList'])
		},
		methods: {
			// ...mapMutations(['setTrolley']),
			...mapActions(['getTrolley', 'setProduct']),
			delect(name, index) {
				console.log(name, index);
			},
			// 显示隐藏
			toggle() {
				if (this.isShow == true) {
					this.hideAnimation = true
					let timer1 = setTimeout(() => {
						this.isShow = false
						clearTimeout(timer1)
					}, 500)
					this.$emit('tolleyHide')
				} else if (this.trolleyList.validList.length + this.trolleyList.invalidList.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请先添加商品',
					})
					this.$emit('tolleyHide')
				} else {
					this.isShow = true
					let timer2 = setTimeout(() => {
						this.hideAnimation = false
						clearTimeout(timer2)
					}, 100)
				}
			},
			// 勾选商品
			selectedTrolley(id, selected) {
				selectedTrolley({
					id,
					selected: !selected
				}).then(res => {
					this.getTrolley()
				})
			},
			// 商品调整数量
			adjCount(item, num) {
				item.quantity += num
				if (item.quantity == 0) {
					item.quantity = 1
					let _this = this
					uni.showModal({
						title: '提示',
						content: '确认移除商品',
						success: function(res) {
							if (res.confirm) {
								deleteTrolley({
									id: item.id
								}).then(res => {
									_this.getTrolley()
								})
							} else if (res.cancel) {
								item.quantity = 1
							}
						}
					});
					return
				}
				this.tempAdjCounts[item.phoneCaseId] = item.quantity
				uni.$u.debounce(() => {
					console.log(this.tempAdjCounts);
					for (let key in this.tempAdjCounts) {
						this.setProduct({
							phoneCaseId: key,
							quantity: this.tempAdjCounts[key]
						})
					}
					this.tempAdjCounts = {}
				}, 1000)

			},
			clearTrolley() {
				let _this = this
				uni.showModal({
					title: '提示',
					content: '确认清空购物车',
					success: function(res) {

						if (res.confirm) {
							clearTrolley().then(res => {
								_this.getTrolleyList()
								_this.toggle()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 获取购物车列表
			getTrolleyList() {
				this.getTrolley()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.trolley-box {
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;

		.trolley-shadow {
			height: 100%;
			width: 100%;
			background-color: #00000010;
			position: absolute;
			top: 0;
			left: 0;
			transition: 0.5s;
		}

		.trolley-content {
			min-height: 450rpx;
			width: 100%;
			border-radius: 40rpx 40rpx 0 0;
			background: #fff;
			position: absolute;
			bottom: 0;
			transform: translateY(0);
			overflow: hidden;
			transition: 0.5s;

			.top {
				height: 102rpx;
				padding: 32rpx;

				.top-title:nth-child(1) {
					float: left;
					font-size: 27rpx;
				}

				.emptied {
					float: right;

					.emptied-pic {
						height: 37rpx;
						width: 37rpx;
						margin-right: 12rpx;
					}

					.emptied-text {
						font-size: 27rpx;
						vertical-align: top;
					}
				}
			}

			.item {
				height: 163rpx;
				margin: 9rpx 32rpx 9rpx;
				padding: 9rpx 0;
				box-sizing: border-box;
				// border-bottom: 1rpx solid #D9D9D9;
				position: relative;
				overflow: hidden;
				display: flex;

				.select {
					flex-shrink: 0;
					flex-grow: 0;
					height: 100%;
					line-height: 140rpx;
				}

				.item-picture {
					height: 145rpx;
					width: 145rpx;
					flex-shrink: 0;
					flex-grow: 0;
				}

				.item-text {
					float: left;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;

					.text {
						display: block;
						font-size: 27rpx;
						font-weight: 300;

						&:nth-child(2) {
							font-size: 34rpx;
						}
					}
				}

				.count {
					width: 130rpx;
					height: 37rpx;
					overflow: hidden;
					position: absolute;
					bottom: 20rpx;
					right: 0;
					display: flex;
					justify-content: space-between;
					font-size: 34rpx;
					color: #333;

					.sub,
					.add {
						height: 37rpx;
						width: 37rpx;
						border-radius: 50%;
						border: 2rpx solid #333;
						box-sizing: border-box;
						padding: 5rpx;

					}
				}

				&:last-child {
					margin-bottom: 0;
				}
			}
		}

		&.hideAnimation {
			.trolley-shadow {
				background-color: #00000000;
			}

			.trolley-content {
				transform: translateY(100%);
			}
		}
	}
</style>